import React, { PureComponent } from 'react';
import { Card, Button, Upload, message } from 'antd';
import { setDocument } from '@/services/setting'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { baseurl } from '@/services/baseurl';
import { getDocument } from '@/services/setting'
import { PageContainer } from '@ant-design/pro-layout'
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            editorState: BraftEditor.createEditorState('<p>请输入内容</p>'), // 设置编辑器初始内容
            outputHTML: '<p></p>' // 编辑器输出内容
        }
    }
    componentDidMount() {
        getDocument('business_list','2').then(res => {
            if(!res)return;
            this.setState({
                editorState: BraftEditor.createEditorState(res.content),
                outputHTML: res.content
            })
        })
    }
    submit = () => {
        const { outputHTML } = this.state;
        setDocument({ content: outputHTML ,url:'business',type:'2'}).then(res => {
            if (res.status === 1) {
                message.success('提交成功')
            } else {
                message.error('提交失败')
            }
        })
    }
    handleEditorChange = (editorState) => {
        this.setState({ editorState, outputHTML: editorState.toHTML() })
    }
    render() {
        const { editorState } = this.state;
        const myUploadFn = (param) => {
            const serverURL = baseurl+'/index/index/img'
            const xhr = new XMLHttpRequest
            const fd = new FormData()
            const successFn = (response) => {
                // 假设服务端直接返回文件上传后的地址
                // 上传成功后调用param.success并传入上传后的文件地址
                param.success({
                    url: baseurl + xhr.responseText.replace('.', '').replace(/"/g, ''),
                })
            }
            const progressFn = (event) => {
                // 上传进度发生变化时调用param.progress
                param.progress(event.loaded / event.total * 100)
            }
            const errorFn = (response) => {
                // 上传发生错误时调用param.error
                param.error({
                    msg: 'unable to upload.'
                })
            }
            xhr.upload.addEventListener("progress", progressFn, false)
            xhr.addEventListener("load", successFn, false)
            xhr.addEventListener("error", errorFn, false)
            xhr.addEventListener("abort", errorFn, false)
            fd.append('file', param.file)
            xhr.open('POST', serverURL, true)
            xhr.send(fd)
        }
        return (
            <PageContainer>
                <Card>
                    <BraftEditor
                        value={editorState}
                        media={{ uploadFn: myUploadFn }}
                        onChange={this.handleEditorChange}
                    />
                    <Button style={{ marginTop: 25 }} onClick={this.submit} type="primary">提交文档</Button>
                </Card>
            </PageContainer>
        );
    }
}

export default Index;
